import React, { useState, useEffect } from 'react';
import {
    Form, Input,
    Button,
    DatePicker, message,
    Skeleton,
    Radio
} from 'antd';
import {
    UserOutlined, LockOutlined,
    MobileOutlined, CheckCircleOutlined
} from '@ant-design/icons';
import moment from 'moment';
import ProCard from '@ant-design/pro-card';
import api from '@/api/apiList';
import { ValidationRules } from '@/utils'
import { storage } from '@/utils/storage'
import YzhUploadImage from '@com/YzhUploadImage'
import './user.scss'
const BaseUserInfo = (props) => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(true)
    const [state, setState] = useState({
        form: {
            ...props
        }
    })
    useEffect(() => {
        const initData = () => {
            try {
                setLoading(true)
                form.setFieldsValue({
                    ...props
                })
                setState({
                    ...state,
                    form: {
                        ...props
                    }
                })
                setLoading(false)
            } catch (error) {
                setLoading(false)
                console.log(error);
            }
        }
        loading && initData()
    }, [props, form])
    const onFinish = () => {
        form
            .validateFields()
            .then(async (values) => {
                setLoading(true)
                let params = {
                    ...values,
                    // userId: state.form.id,
                    birthday: values['birthday'].format('YYYY-MM-DD'),
                    avatar: props.avatar,
                    userSource: 1001
                }
                let res = await api.userCenter.user.editByCenter(params, 'user_center')
                await setLoading(false)
                if (res && res.success) {
                    res && res.success && message.success('操作成功')
                    props.setUserInfo({
                        ...params,
                        avatar: props.avatar,
                    })
                }
            })
            .catch((info) => {
                console.log('Validate Failed:', info);
            });
    }
    return <Form
        name="BaseUserInfo"
        form={form}
        style={{
            padding: 30,
            maxWidth: 600
        }}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        initialValues={{ sex: 1001 }}
        onFinish={onFinish}
        autoComplete="off"
    >
        <Form.Item
            label="账号"
            name="account"
            rules={[
                {
                    required: true,
                    validator: (rule, value) => {
                        return new ValidationRules({
                            prop: 'account',
                            message: '账号',
                            type: 'account',
                            limit: 11,
                            inputControll: true,
                            value
                        }).validate(rule, value)
                    },
                },
            ]}
        >
            <Input disabled placeholder="请输入账号" maxLength={30} />
        </Form.Item>
        <Form.Item
            label="姓名"
            name="name"
            rules={[
                {
                    required: true,
                    validator: (rule, value) => {
                        return new ValidationRules({
                            prop: 'name',
                            message: '姓名',
                            type: 'chinese',
                            value
                        }).validate(rule, value)
                    },
                },
            ]}
        >
            <Input placeholder="请输入姓名" maxLength={5} />
        </Form.Item>
        <Form.Item
            label="电话"
            name="phone"
            rules={[
                {
                    required: true,
                    validator: (rule, value) => {
                        return new ValidationRules({
                            prop: 'phone',
                            message: '电话',
                            type: 'phone',
                            value
                        }).validate(rule, value)
                    },
                },
            ]}
        >
            <Input maxLength={11} placeholder="请输入电话" />
        </Form.Item>
        <Form.Item
            name="birthday"
            label="出生日期"
            rules={[
                {
                    required: true,
                    message: '请选择出生日期!',
                },
            ]}
        >
            <DatePicker format="YYYY-MM-DD"
                disabledDate={(current) => current && (current > moment().endOf('day') || current < moment('1969-12-31').endOf('day'))}
                style={{ width: '100%' }} placeholder="请选择出生日期" />
        </Form.Item>
        <Form.Item
            name="email"
            label="邮箱"
            rules={[
                {
                    required: false,
                    validator: (rule, value) => {
                        if (value) {
                            return new ValidationRules({
                                prop: 'email',
                                message: '邮箱',
                                type: 'email',
                                value
                            }).validate(rule, value)
                        }
                        return Promise.resolve()
                    },
                },
            ]}
        >
            <Input maxLength={50} value={state.form.email || null} placeholder="请输入邮箱">
            </Input>
        </Form.Item>
        <Form.Item
            name="sex"
            label="性别"
            rules={[
                {
                    required: true,
                    message: '请选择性别!',
                },
            ]}
        >
            <Radio.Group value={state.form.sex || null} placeholder="请选择性别">
                <Radio value={1001}>男</Radio>
                <Radio value={1002}>女</Radio>
            </Radio.Group>
        </Form.Item>
        <Form.Item style={{ marginTop: 24 }} wrapperCol={{ push: 4 }}>
            <Button type="primary" className="mr10" loading={loading} htmlType="submit">
                更新个人信息
            </Button>
        </Form.Item>
    </Form>
}
class userInfoManage extends React.Component {
    state = {
        avatar: '',
        account: '',
        name: '',
        deptName: '',
        id: '',
        phone: '',
        sex: 1001,
        loading: true,
    }
    async componentDidMount () {
        try {
            let userInfo = storage.get('userInfo')
            let user = await api.userCenter.user.currentUserInfo()
            this.setState({
                loading: false,
                ...user.result,
                avatar: userInfo.avatar,
                id: user.result.userId,
                birthday: moment(user.result.birthday),
                sex: user.result && user.result.sex && user.result.sex.code || 1001,
            })
        } catch (error) {
            this.setState({
                loading: false,
            })
            console.log(error);
        }
    }
    updateAvatar = (avatar) => {
        this.setState({
            avatar,
        })
    }
    render () {
        const {
            avatar,
            name,
            deptName,
            loading
        } = this.state
        return <ProCard split="vertical" className="yzh-user-info">
            <ProCard colSpan="30%" className="column align-c just-c left">
                {!loading ? <React.Fragment>
                    <YzhUploadImage
                        value={avatar}
                        text="上传头像"
                        onChange={this.updateAvatar} />
                    <div className="bottom tc">
                        <p className="username">{name}</p>
                        <p className="name">{deptName}</p>
                        {/* <p className="phone"><MobileOutlined /> {phone}</p> */}
                    </div>
                </React.Fragment> : <Skeleton className="column align-c just-c" active avatar={{ size: 100 }} paragraph={{ rows: 2, width: 200 }} />}
            </ProCard>
            <ProCard title="基本信息" headerBordered className="right" >
                <div style={{ minHeight: 360 }}>
                    {!loading ? <BaseUserInfo {...this.state} setUserInfo={(values) => {
                        this.props.setUserInfo({
                            phone: values.phone,
                            avatar: avatar,
                            deptName,
                            name: values.name,
                        })
                        this.setState({ ...values })
                    }} /> : <Skeleton active paragraph={{ rows: 5 }} />}
                </div>
            </ProCard>
        </ProCard>
    }
}

export default userInfoManage;